import React, { useEffect } from 'react';
// import csvData from './data/data.csv';
import jsonData from './data/data.json';
import * as d3 from 'd3';
import './style/5.css';

const WeatherChart = function () {

    useEffect(() => {
        d3.select('svg').selectAll('*').remove();

        var svg = d3.select("body").select("svg")
        var content = d3.select(".weather-chart")
        var margin = {
            top: 40,
            right: 50,
            bottom: 40,
            left: 50
        };
        let contentWidth = content.style('width').substring(0, content.style('width').length - 2)
        let contentHeight = content.style('height').substring(0, content.style('height').length - 2)

        var width = contentWidth - margin.left - margin.right;
        var height = contentHeight - margin.top - margin.bottom;

        let chartContainer = svg.append("g").attr('class', 'chart-container')
            .attr("width", width).attr("height", height)
            .attr("transform", "translate(" + margin.left + "," + (margin.top) + ")");

        // var parseDate = d3.timeFormat("%d-%b-%y").parse;
        // var bisectDate = d3.bisector(function(d) {
        //     return d.time;
        // }).left;
        // var formatValue = d3.format(",.2f");
        // var formatCurrency = function(d) {
        //     return "$" + formatValue(d);
        // };

        var data = jsonData.data.map((item) => {
            if (item.tmp) {
                return { ...item }
            } else {
                return { ...item, tmp: 0 }
            }
        });

        // 最高气温
        var maxDataTmp = 0;
        // 最低气温
        var minDataTmp = 0;
        data.forEach(function (d) {
            d.time = new Date(d.time).valueOf();
            d.tmp = +d.tmp;
            if (d.tmp > maxDataTmp) {
                maxDataTmp = d.tmp;
            }
            if (d.tmp < minDataTmp) {
                minDataTmp = d.tmp
            }
        });


        var x = d3.scaleTime()
            .range([0, width])
            .domain([data[0].time, data[data.length - 1].time]);

        var y = d3.scaleLinear()
            .range([height, 0])
            .domain([minDataTmp, maxDataTmp])

        var xAxis = d3.axisBottom()
            .scale(x).ticks(d3.timeHour.every(2)).tickFormat(d3.timeFormat("%d %I:%M"));

        var yAxis = d3.axisLeft()
            .scale(y)

        // Define the area fill
        var area = d3.area()
            .x(function (d) { return x(d.time) })
            .y0(height)
            .y1(function (d) { return y(d.tmp); });


        chartContainer.append("linearGradient")
            .attr("id", "area-gradient")
            .attr("gradientUnits", "userSpaceOnUse")
            .attr("x1", '0%').attr("y1", '0%')
            .attr("x2", '0%').attr("y2", '100%')
            // x1 = 100% (red will be on right horz) / y1 = 100% (red will be on bottom vert)
            // x2 = 100% (red will be on left horz) / y2 = 100% (red will be on top vert)
            // mixed values will change the angle of the linear gradient. Adjust as needed.
            .selectAll("stop")
            .data([
                { offset: "0%", color: "rgba(253, 148, 0, 0.5)" },
                // add additional steps as needed for gradient.
                { offset: "95%", color: "transparent" }
            ])
            .enter().append("stop")
            .attr("offset", function (d) { return d.offset; })
            .attr("stop-color", function (d) { return d.color; });

        chartContainer.append("g")
            .attr("class", "x-axis")
            .attr("transform", "translate(0," + height + ")")
            .call(xAxis);

        chartContainer.append("g")
            .attr("class", "y-axis")
            .call(yAxis)
            .append("text")
            .attr("transform", "rotate(0)")
            .attr("transform", "translate(20, 5)")
            .style("text-anchor", "end")
            .text("℃");

        chartContainer.append("path")
            .datum(data)
            //.attr("class", "line")
            //.attr("d", line)
            .attr("class", "area")
            .attr("d", area);

        //添加文字元素
        chartContainer.append("g")
            .attr("class", "my-text")
            .selectAll(".my-text")
            .data(data)
            .enter()
            .append("text")
            .attr("transform", "translate(-8, -5)")
            // .attr("transform","translate(" + xScale.bandwidth()/2 + "," + padding.top + ")")
            .attr("x", function (d, i) {
                return x(d.time);
            })
            .attr("y", function (d) {
                return y(d.tmp);
            })
            .text(function (d) {
                return d.tmp + "°";
            });

        // 尝试

    }, [])

    return (
        <div className="weather-chart">
            <svg className="chart-show"></svg>
        </div>
    )
}

export default WeatherChart